import type { GreasyForkElements } from '../../../../../../../../../types/constants/personalization/greasy_fork'
import {
  PAGE_ELEMENTS,
  PROJECT_PREFIX,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../../types/constants'

// 测试链接：https://greasyfork.org/zh-CN/users/webhook-info
export class WebhookInfoPage {
  elements: GreasyForkElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.GREASY_FORK]
  private static instance: WebhookInfoPage

  /**
   * 获取单例实例
   */
  public static getInstance(): WebhookInfoPage {
    if (!WebhookInfoPage.instance) {
      WebhookInfoPage.instance = new WebhookInfoPage()
    }
    return WebhookInfoPage.instance
  }

  init(): void {
    // 优化文本域样式
    $('.width-constraint dd form textarea').attr('rows', '5')
  }

  getMainStyles(): string {
    return `
.text-content {
  h2 {
    color: var(--${PROJECT_PREFIX}-theme-text-primary) !important;
    margin-top: 0 !important;
    padding-top: 16px !important;
  }
  
  ul {
    li:not(:has(a)) {
      color: #34d399 !important;
      font-weight: normal !important;
      b {
        color: #ea580c !important;
        font-weight: normal !important;
      }
    }
  }
  
  dd form {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    textarea {
      margin: 10px 0 !important;
      padding: 10px !important;
      outline: none !important;
      background: var(--${PROJECT_PREFIX}-theme-comment-bg) !important;
      color: var(--${PROJECT_PREFIX}-theme-comment-text) !important;
      border: 1px solid var(--${PROJECT_PREFIX}-theme-border-neutral) !important;
    }
  }
}
`
  }
}
